<!--
* @description gmm数据查询
* @fileName gmm.vue
* @author huangyu
* @date 2022/06/17 10:45:03
!-->
<template>
    <div>
        <van-sticky>
            <van-search v-model="name" placeholder="请输入关键词" @search="changeData" @cancel="changeData" />
            <div>
                <van-dropdown-menu>
                    <van-dropdown-item v-model="group_name" :options="fwqList" @change="changeData" />
                    <van-dropdown-item v-model="p_job" :options="zyList" @change="changeData" />
                    <van-dropdown-item v-model="p_race" :options="raceList" @change="changeData" />
                    <van-dropdown-item title="价格" ref="item">
                        <van-cell center>
                            <template #right-icon>
                                <van-field v-model="min" placeholder="请输入最小值" />
                            </template>
                        </van-cell>
                        <van-cell center>
                            <template #right-icon>
                                <van-field v-model="max" placeholder="请输入最大值" />
                            </template>
                        </van-cell>
                        <van-cell center>
                            <template #right-icon>
                                <van-button type="info" plain @click="changePrice('asc')">从小到大</van-button>
                                <van-button type="info" plain @click="changePrice('desc')" style="margin-left:10px;">从大到小</van-button>
                            </template>
                        </van-cell>
                        <div style="padding: 5px 16px;">
                            <van-button type="info" block round @click="onConfirm">
                                确认
                            </van-button>
                        </div>
                    </van-dropdown-item>
                </van-dropdown-menu>
            </div>
        </van-sticky>

        <div style="margin:10px 0;">
            <van-cell value="" v-for="(item,index) in list" :key="index" is-link :url="`https://www.gmmsj.com/dy/78_zh/detail_${item.book_id}.shtml`">
                <el-row>
                    <el-col :span="19">
                        <div><strong>{{item.p_name}}</strong></div>
                        <div style="color:#999">{{item.group_name}}-{{item.p_race==1?'天族':'魔族'}}-{{item.p_sex==1?'男':'女'}}-{{zyList[item.p_job]?zyList[item.p_job].text:''}}</div>
                        <div style="color:#999;font-size:12px;">{{item.other}}</div>
                    </el-col>
                    <el-col :span="5">
                        <div style="text-align:right;"><strong class="color_danger">￥{{item.price}}</strong></div>
                    </el-col>
                </el-row>
            </van-cell>
        </div>

        <van-pagination v-model="pageindex" :total-items="total" :items-per-page="pagesize" @change="changePage" />
    </div>
</template>

<script>
// import { Toast } from 'vant';
import { get } from '@/common/app.js'
export default {
    components: {},
    data() {
        return {
            list: [],

            pageindex: 1,
            pagesize: 20,
            total: 0,
            
            name: '',
            group_name: '',
            p_job: null,
            p_race: null,
            min: '',
            max: '',
            price: 'asc',
            fwqList: [
                {text:'服务器',value:'',},
                {text:'永恒之巅',value:'永恒之巅',},
                {text:'谁与争锋',value:'谁与争锋',},
                {text:'永恒之岛',value:'永恒之岛',},
                {text:'红龙祭坛',value:'红龙祭坛',},
                {text:'火之神殿',value:'火之神殿',},
                {text:'八星争霸',value:'八星争霸',},
                {text:'王者之巅',value:'王者之巅',},
            ],
            zyList: [
                {text:'职业',value:null,},
                {text:'剑星',value:1,},
                {text:'守护星',value:2,},
                {text:'杀星',value:3,},
                {text:'弓星',value:4,},
                {text:'魔道星',value:5,},
                {text:'精灵星',value:6,},
                {text:'治愈星',value:7,},
                {text:'护法星',value:8,},
            ],
            raceList:[
                {text:'种族',value:null,},
                {text:'天族',value:1,},
                {text:'魔族',value:2,},
            ],
            
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData(){
            let params = {
                type: 'getAionGMM',
                data: {
                    type: 'getList',
                    name: this.name,
                    group_name: this.group_name,
                    p_job: this.p_job,
                    p_race: this.p_race,
                    min: this.min,
                    max: this.max,
                    price: this.price,
                    pageIndex: this.pageindex,
                    pageSize: this.pagesize,
                },
            }
            get('game',params).then(res=>{
                if(res){
                    this.list = res.list
                    this.total = res.total
                    // console.log(this.list)
                }
            })
        },
        changeData(){
            this.pageindex = 1
            this.getData()
        },

        changePage(value){
            this.pageIndex = value
            this.getData()
        },

        changePrice(val){
            this.price = val
            this.changeData()
            this.$refs.item.toggle()
        },

        onConfirm(){
            this.$refs.item.toggle()
            this.changeData()
        },
    },
}
</script>

<style scoped>
</style>